<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  /*// 平滑的过渡*/
  /*@keyframes blink-smooth {
    to {
      color: transparent
    }
  }
  
  .highlight {
    animation: .5s blink-smooth 6 alternate;
  }*/
  /*如果我们想得到的是一个平滑的闪烁动画，现在就可以收工了。不过，
假如我们只想得到最普通的那种闪烁效果呢？应该如何实现？我们首先想到
的办法可能是：*/
  
  @keyframes blink {
    50% {
      color: transparent
    }
  }
  
  .highlight {
    animation: 1s blink 3 steps(1);
  }
</style>

<body>
  <div class="highlight">你好好几款黑科技</div>
</body>

</html>